<template>
	<div>
		<div class="footer">
			<mt-tabbar v-model="selected" fixed>
				<mt-tab-item id="home">
					<i slot="icon" class="iconfont icon-shouye"></i> 首页
				</mt-tab-item>
				<mt-tab-item id="bookrack">
					<i slot="icon" class="iconfont icon-books"></i> 书架
				</mt-tab-item>
				<mt-tab-item id="schoolroom">
					<i slot="icon" class="iconfont icon-shuku"></i> 书房
				</mt-tab-item>
				<mt-tab-item id="discover">
					<i slot="icon" class="iconfont icon-faxian"></i> 发现
				</mt-tab-item>
				<mt-tab-item id="myself">
					<i slot="icon" class="iconfont icon-wode"></i> 我的
				</mt-tab-item>
			</mt-tabbar>
		</div>
		
	</div>
</template>

<script>
	export default {
		
		data() {
			return {
				selected: 'home',

			}
		},
		watch: {
			selected: function(val, oldVal) {
				console.log(val)
				this.$router.push(val)
				window.localStorage.setItem('navTabIndex', val);
			}
		},
		created: function() {
			if(window.localStorage.getItem('navTabIndex')){
				let localData = window.localStorage.getItem('navTabIndex')
				this.selected = localData
			}else {
				this.selected = 'home';

			}
			
		}
	}
</script>

<style scoped>
	/*icon 大小*/
	.iconfont {
		font-size: 24px;
		display: block;
	}
	
	/*icon 未选择颜色*/
	.mint-tabbar .mint-tab-item {
		color: #A1A1A1;
	}
	
	/*定位*/
	.mint-tabbar {
		position: fixed;
		bottom: 0;
		height: 50px;
		background-color: #ffffff;
	}
	/*tab 切换字体图标颜色*/
	.mint-tabbar>.mint-tab-item.is-selected {
		background-color: none;
		color: #e60012;
	}
	/*降低高度*/
	.footer .mint-tab-item {
		padding: 3px 0;
	}
	
	
	

</style>